<?php /*a:3:{s:64:"D:\phpstudy_pro\WWW\oldi-erp\app\Admin\view\products\catego.html";i:1744767659;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\Admin\view\public\header.html";i:1743495714;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\Admin\view\public\style.html";i:1743495714;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>



        <style scoped>
            .el-select-dropdown {
            padding: 0;
            }
            .prant{
                margin-left: 10px;
            }
        </style>
        
<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>产品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm" >                
                    <el-form-item label="分类名称" >                     
                        <el-input v-model="searchForm.name" placeholder="请输入分类名称" clearable filterable ></el-input>
                    </el-form-item> 
                    <el-form-item label="属性名字">                                         
                        <el-select v-model="searchForm.a_id" placeholder="请选择属性名字">
                            <el-option v-for="item in attribute" :key="item.id" :value="item.id" :label="item.name"></el-option>   
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="分类状态">
                        <el-select v-model="searchForm.status" placeholder="请选择分类状态" filterable clearable>
                            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                    </el-form-item>          
               </el-form>
                <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                        <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit" >添加分类</el-button>       
                </div>
            </div>

            <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column   prop="id" label="ID" width="100"> </el-table-column>    
                <el-table-column   prop="name" label="分类名称"> </el-table-column>     
                <el-table-column   prop="attributes" label="所属的属性"> </el-table-column>                
                <el-table-column   prop="status"  label="状态" width="100">
                   <template v-slot="{row}">
                       <span v-if="row.status===1">
                           <el-tag type="success">启用</el-tag>
                        </span>
                        <span   v-if="row.status===0">
                           <el-tag type="danger">禁用</el-tag>                                                
                       </span>     
                      
                   </template>

                </el-table-column>
                
                <el-table-column   prop="createtime" label="创建时间" width="170"> </el-table-column>      
                <el-table-column  fixed="right" label="操作" width="230">
                    <template v-slot="{row}">
                        <el-button type="primary"  plain  icon="el-icon-edit"   @click="editor(row)" >编辑 </el-button>        
                        <el-button type="danger"  plain icon="el-icon-delete"   @click="cancel(row.id)">禁用</el-button>             
                    </template>
                </el-table-column>
            </el-table>
            <!-- page -->            
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>  
        </el-card>        
       

        <!-- 修改编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="iscategoVisible " width="600px" :close-on-click-modal="false">
            <el-form :inline="true" :model="createForm" size="mini"  :rules="isAttributerules"  ref="refsearchForm"  :popper-append-to-body="false"  >              
            
                <el-form-item label="父体分类" class="prant">               
                    <el-select v-model="createForm.pid" placeholder="请选择父体分类名字" style="width: 330px;"  clearable >
                        <el-option v-for="item in catego" :key="item.id" :value="item.id" :label="item.name" ></el-option>   
                    </el-select>
                  
                </el-form-item>  

                <el-form-item prop="name" label="分类名字">
                    <el-input v-model="createForm.name" placeholder="请输入分类名字" style="width: 330px;" clearable></el-input>
                </el-form-item>
                <div>  
                    <el-form-item prop="code" label="商品属性">
                        <template>    
                            <div class="group-items" >
                                <el-checkbox-group    v-model="createForm.a_id">
                                    <el-checkbox v-for="item in attribute" :key="item.id" :label="item.id" >
                                        {{item.name}}
                                    </el-checkbox> 
                                </el-checkbox-group>
                            </div>
                        </template>
                    </el-form-item>  
               </div> 
               <div>      
                <el-form-item  label="分类状态:">                                  
                    <el-radio-group v-model="createForm.status"  style="margin-left: 10px;">         
                        <template>            
                        <el-radio :label="1"  >正常</el-radio>   
                        <el-radio :label="0"  >关闭</el-radio>                     
                    </template>
                    </el-radio-group>                
                </el-form-item> 
            </div>                    
                <div>                                   
                    <el-form-item>
                        <el-button type="primary" @click="checkSubmits">确认</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>   
</div>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                    return {    
                        attribute:<?php echo $attribute; ?>, //属性列表   
                        catego:[], //父体分类列表   
                        title:'',
                        url:"/Admin/products",
                        iscategoVisible:false,
                        createForm:{
                            a_id:[],
                            status:'',
                            pid:'',
                            name:'',
                            },
                        searchForm:{   
                            name:'',     
                            a_id:'', 
                            status:'',    
                            pagesize:20,
                            pagenum:1, 
                        } , //搜索条件
                        status:[                   
                            {
                                value: 1,
                                label: '正常'
                            },
                            {
                                value: 2,
                                label: '关闭'
                            },
                        ],// 状态是否正常              
                
                        total:0,   //分页总页数      
                        tablelist:[] ,              
                        isAttributerules: {                      
                            name: [
                                { required: true, message: '请填写分类名称', trigger: 'blur' },
                                
                            ], 
                            a_id: [
                                { required: true, message: '请填写商品属性', trigger: 'change'},
                                
                            ], 
                            
                        }
                    }
            },
            mounted(){        
                this.getSearch()
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post(this.url+'/catego', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list

                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },     
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },
            
                //删除
                cancel($id){
                    this.$confirm('确认需要删除吗？删除下面所有子集也会跟着删除无法恢复', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                        type: 'warning'
                    }).then(() => {
                        axios.post(this.url+'/catego_delete', {params: {id: $id}}).then(res => {
                            if (res.status !== 1) {
                                return this.$message.error(res.info);             
                            }                    
                            this.$message.success('删除成功');
                            this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                },
                
                //编辑
                async editor(row){
                   const res = await axios.get(this.url+'/catego_info')           
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    }
                    this.catego = res.info  
                    this.title = '编辑属性'
                    this.iscategoVisible = true
                    this.createForm=JSON.parse(JSON.stringify(row));               
                },
                //添加权限
                async create(){ 
                    const res = await axios.get(this.url+'/catego_info')           
                    if (res.status !== 1) {
                        return  this.$message.error(res.info);             
                    }
                    this.catego = res.info   
                    this.title = '添加属性'
                    this.iscategoVisible = true
                    this.createForm.id = ''
                    this.createForm.status = 1
                    this.createForm.name = ''
                    this.createForm.a_id = []  
                    this.createForm.pid = ''            
                }, 
                async checkSubmits(){
                    this.$refs.refsearchForm.validate(async valid => {
                        if (!valid) return;
                        let loading = this.$loading({
                            lock: true,
                            text: '数据修改中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });                

                    axios.post(this.url+'/catego_create', {params: this.createForm}).then(res => {
                            loading.close()
                            if (res.status !== 1) {
                                return this.$message.error(res.info);                  
                            }
                        
                            this.$message.success('操作成功');
                            this.iscategoVisible = false
                            this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })
                    })
                } ,
                //关闭弹窗
                close(){
                    this.iscategoVisible=false  
                },  
            }
        })
    </script>
  </body>
</html>
